<template>
  <div class="panel-tab__content flow-form-config">
    <FormHolder label-width="80px">
      <FormSelect
        v-model="enabledButtons"
        label="启用按钮"
        :options="optionButtons"
        classic
        multiple
        block
        @input="val => updateProperties(val, 'EnabledButtons')" />
      <FormSelect
        v-model="disabledButtons"
        label="禁用按钮"
        :options="optionButtons"
        classic
        multiple
        block
        @input="val => updateProperties(val, 'DisabledButtons')" />
      <FormInputTag
        v-model="hideFields"
        :object-mode="false"
        label="隐藏字段"
        block
        @input="val => updateProperties(val, 'HideFields')" />
      <FormInputTag
        v-model="enabledFields"
        :object-mode="false"
        label="启用字段"
        block
        @input="val => updateProperties(val, 'EnabledFields')" />
    </FormHolder>
  </div>
</template>

<script>
  import { getExtensionPropByElement, updateExtensionProp } from '@/views/module/flow-designer'
  export default {
    name: 'FormConfig',
    inject: {
      prefix: 'prefix',
      width: 'width'
    },
    props: {
      id: String,
      element: Object,
      bpmnInstances: Object
    },
    data() {
      return {
        enabledFields: [],
        enabledButtons: [],
        disabledButtons: [],
        hideFields: [],
        optionButtons: [
          {
            value: 'turnBtn',
            label: '转办'
          },
          {
            value: 'delegateBtn',
            label: '委派'
          },
          {
            value: 'beforeSignBtn',
            label: '前加签'
          },
          {
            value: 'afterSignBtn',
            label: '后加签'
          },
          {
            value: 'reverseSign',
            label: '反收签'
          },
          {
            value: 'stopBtn',
            label: '终止'
          }
        ]
      }
    },
    watch: {
      id: {
        immediate: true,
        handler: 'initForm'
      }
    },
    methods: {
      initForm() {
        const nodeEnabledFields = `${this.prefix}:EnabledFields`
        const nodeEnabledButtons = `${this.prefix}:EnabledButtons`
        const nodeDisabledButtons = `${this.prefix}:DisabledButtons`
        const nodeHideFields = `${this.prefix}:HideFields`

        // 可编辑字段
        const rawEnabledFields = getExtensionPropByElement(this.element, nodeEnabledFields)
        this.enabledFields = rawEnabledFields ? JSON.parse(rawEnabledFields) : []
        // 启用按钮
        const rawEnabledButtons = getExtensionPropByElement(this.element, nodeEnabledButtons)
        this.enabledButtons = rawEnabledButtons ? JSON.parse(rawEnabledButtons) : []
        // 禁用按钮
        const rawDisabledButtons = getExtensionPropByElement(this.element, nodeDisabledButtons)
        this.disabledButtons = rawDisabledButtons ? JSON.parse(rawDisabledButtons) : []
        // 隐藏字段
        const rawHideFields = getExtensionPropByElement(this.element, nodeHideFields)
        this.hideFields = rawHideFields ? JSON.parse(rawHideFields) : []
      },
      updateProperties(val, type) {
        const nodeType = `${this.prefix}:${type}`
        updateExtensionProp(this.bpmnInstances, this.element, nodeType, val)
      }
    }
  }
</script>

<style lang="scss">
  .flow-form-config {
    .el-col {
      margin-top: 10px;

      &:first-child {
        margin-top: 0;
      }
    }
  }
</style>
